<template>
    <div>
        <div class="home-header">
            <el-radio-group v-model="radio" size="large" @change="handlechange">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
            <el-select v-model="selectDay" class="m-2" placeholder="请选择" size="large" @change="handlechange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="text1" ref="myEChartsBar"></div>
        <div class="text2" ref="myEChartsBar2"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, reactive } from 'vue';
import { INDEX_ECHARTS_GET } from '../../api/index'
import axios from 'axios'
import { LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
const { proxy } = getCurrentInstance()
const myEChartsBar = ref()
const myEChartsBar2 = ref()
const state = reactive({
    saleMap: [],//地图数据
    salePie: [],//饼状图数据
    options: [{
        value: 'yesterday',
        label: '昨天',
    },
    {
        value: 'today',
        label: '今天',
    },
    {
        value: 'three_days',
        label: '前3天',
    },
    {
        value: 'seven_days',
        label: '前7天',
    },
    {
        value: 'fourteen_days',
        label: '前14天',
    },],

})
const selectDay = ref('yesterday')
const radio = ref('sale_')
const { saleMap, salePie, options, } = { ...state }
onMounted(() => {
    // initChart()
})
const getEchartInfo = () => {
    axios(INDEX_ECHARTS_GET).then((res) => {
        saleMap.value = res.data.data.saleMap
        salePie.value = res.data.data.salePie
        initPie()
    })
}

// 基本柱形图
function initPie() {
    let key = ''
    if (radio.value == 'sale_') {
        key = radio.value + selectDay.value
    } else {
        key = selectDay.value + radio.value
    }
    let arr = salePie.value.map((item) => {
        return { value: item[key], name: item.name }
    })
    proxy.$echarts.use([LegendComponent, PieChart])
    const myEChart = proxy.$echarts.init(myEChartsBar.value);
    const option = {
        title: {
            // text: 'Referer of a Website',
            // subtext: 'Fake Data',
            // left: 'center'
        },
        tooltip: {
            trigger: 'item',
            show: true,
            formatter: `{b}: {c} ({d})%`
        },
        legend: {
            right: 10,
            top: 20,
            width: 300,
            height: 100,
            orient: 'vertical'
        },
        series: [
            {
                name: '',
                center: ['24%', '50%'],
                type: 'pie',
                radius: ['40%', '70%'],
                data: arr,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myEChart.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myEChart.resize();
    });
}
// function initChart() {
//     axios.get('/china.json').then(res => {
//         proxy.$echarts.registerMap('china', res.data)
//         const myMap = proxy.$echarts.init(myEChartsBar2.value);

//         const option = {
//             title: {
//                 text: "中国地图",
//                 left: 'center',
//                 subtext: "下载链接",
//                 sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
//             },
//             // 悬浮窗
//             tooltip: {
//                 trigger: 'item',
//                 formatter: function (params) {
//                     return `${params.name}: ${params.value || 0}`

//                 }
//             },
//             // 图例
//             visualMap: {
//                 min: 800,
//                 max: 50000,
//                 text: ['High', 'Low'],
//                 realtime: false,
//                 calculable: true,
//                 inRange: {
//                     color: ['lightskyblue', 'yellow', 'orangered']
//                 }
//             },
//             // 要显示的散点数据
//             series: [
//                 {
//                     type: 'map',
//                     map: 'china',
//                     // 这是要显示的数据
//                     data: this.seriesData,
//                     // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
//                     nameMap: {
//                         '北京市': "北京重命名",
//                         "天津市": '天津重命名'
//                     },
//                 },

//             ]

//         }
//         myMap.setOptions(option);
//     })


// }
const handlechange = () => {
    initPie()
}
getEchartInfo()
</script>
<style scoped lang="scss">
.text1 {
    height: 500px;
}

.text2 {
    height: 500px;
}

.home-header {
    background-color: white;
    border: 1px solid whitesmoke;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
</style>